<template>
    <div class="container">
        <!-- 点击首页文章，转到次页面，并将文章相关id 编号带过来 -->
        <n-button @click="toHomePage"> 返回 </n-button>

        <!-- 标题 -->
        <n-h1>{{ blogInfo.title }}</n-h1>

        <!-- 文章内容 -->
        <!-- 如果以此形式显示出来，页面会则是会按照源码形式显示到页面内，并不会以html的形式显示出来 -->
        <!-- <div>{{ blogInfo.content }}</div> -->
        <!-- 该形式则会以html的形式将源码内容显示出来 -->
        <div class="blog-content">
            <div v-html="blogInfo.content"></div>
        </div>

    </div>
</template>

<script setup>
    import { ref,reactive,inject ,onMounted, computed } from 'vue'

    // 引入路由模块
    import { useRouter, useRoute } from 'vue-router'

    // 该路由是负责跳转的
    const router =  useRouter()
    // 该路由是负责获取传递参数的
    const route = useRoute()
    const blogInfo = ref({})
    const axios = inject("axios")


    onMounted(()=>{
        loadBlog()

    })

    const loadBlog = async () => {

        let res = await axios.get("/blog/detail?id=" + route.query.id)
        blogInfo.value = res.data.rows[0];

    }

    const toHomePage = () =>{
        router.push("/")
    }

</script>

<style>
 .blog-content img{
    max-width: 100% !important;
 }
</style>

<!-- 由于有 scoped 这个标签，会导致图片中的标签没有添加相应的 data数据化处理 -->
<style lang="scss" scoped>

 .container{
    
    width: 1200px;
    margin: 0 auto;

 }
 


</style>